<template>
    <div class="form-page">
        <el-form
            ref="dataForm"
            element-loading-text="导入中。。。"
            :model="dataForm"
            :inline="true"
            label-width="10em"
            :rules="dataFormRule"
            class="data-form"
        >
            <div class="form-item xy-start al-str">
                <div class="title">导入信息
                    <el-button
                        style="margin-left: 10px;"
                        size="small"
                        type="success"
                        @click="downLoadModel()"
                    >导入模板下载
                    </el-button>
                </div>
                <div class="yx-start al-start data" align="center">
                    <el-form-item label="所属机构" prop="groupId">
                        <el-select
                            v-model="dataForm.groupId"
                            placeholder="选择机构"
                            filterable
                            remote
                            :remote-method="getGroup"
                            clearable
                        >
                            <el-option
                                v-for="item in groups"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="childrenDiv">
                        <el-upload
                            ref="upload"
                            class="upload-demo"
                            action="/api/vers7/user/cu/member/import-member"
                            :data="dataForm"
                            :headers="headerObj"
                            :multiple="false"
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-progress="uploading"
                            :on-success="successUpload"
                            :on-error="failUpload"
                            :auto-upload="false"
                        >
                            <el-button type="primary"
                            >上传<i
                                class="el-icon-upload el-icon--right"
                            ></i
                            ></el-button>
                            <span slot="tip" class="el-upload__tip"
                            >只能上传excel文件</span
                            >
                        </el-upload>
                    </div>
                    <div class="childrenDiv">
                        <el-button
                            style="margin-left: 10px;"
                            size="small"
                            type="success"
                            @click="submitForm()"
                        >导入
                        </el-button>
                    </div>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import {getGroupList} from "@/api/user";

var options = {
    lock: true,
    text: "正在导入用户",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)"
};

export default {
    name: "ImportMember",
    mixins: [],
    data() {
        return {
            headerObj: {dt: "admin"},
            groups: null,
            zeroOne: 0,
            dataForm: {
                groupId: null,
            },
            loading: false,
            dataFormRule: {
                groupId: [
                    {required: true, message: "请选择！", trigger: "change"}
                ]
            }
        };
    },
    computed: {},

    watch: {},
    created() {
        this.getGroup();
    },
    methods: {
        getGroup(name) {
            getGroupList({name: name, size: 1000}).then(res => {
                this.groups = res;
            })
        },
        downLoadModel() {
            window.location.href =

                "https://langrundata-middle-cdn.oss-cn-shanghai.aliyuncs.com/cdn/vers7/xlsx/202205/%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5EXCEL%E6%A8%A1%E6%9D%BF.xlsx";
        },
        submitForm() {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$refs.upload.submit();
                } else {
                    return false;
                }
            });
        },
        uploading() {
            this.$loading(options);
        },
        successUpload(response) {
            this.$loading().close();
            if (response.code !== 1) {
                this.$message.error(response.message)
            } else {
                this.$message({
                    showClose: true,
                    message: "导入成功",
                    type: "success"
                });
            }
        },
        failUpload() {
            this.$loading().close();
            this.$message({
                showClose: true,
                message: "上传失败",
                type: "error"
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.childrenDiv {
    margin: 0 auto;
}
</style>
